<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
		<!-- 水平滚动菜单 -->
		<scroll-view class="scroll-view-x" scroll-x>
			<block v-for="(it, k1) in navs" :key="k1">
				<view :class="['scroll-view-item-h', isActive === k1 ? 'active' : '']" @click="switchMenu(k1)">{{it.type_name}}</view>
			</block>
		</scroll-view>
		<!-- 搜索条 -->
		<view class='search flex'>
			<view class="lt">
				<input type='text' focus="true" @input="getKeywords" placeholder='搜索您想要的问答'></input>
			</view>
			<view class="rt" @click="search">
				<image src='../../static/25.png' mode="widthFix" lazy-load="true"></image><text>搜索</text>
			</view>
		</view>
		<view class="question" v-if="searchRes">
			<text class='label'>共 {{searchLists.length}} 条结果</text>
			<block v-for="(it, k3) in searchLists" :key="k3">
				<view class="question-i" @click="goDetail(it.id)">
					<view class="col-2 lt">
						<image :src="it.img" mode="widthFix" lazy-load="true" @error="imgError2(k3)" v-if="it.img"></image>
						<image src="../../static/avatars_default.png" mode="widthFix" lazy-load="true" v-else></image>
						<text class="clamp clamp-1">{{it.name}}</text>
					</view>
					<view class="col-10 rt">
						<text class="up">问题：<text v-if="it.status == 1" style="color: #ff9d00;">已解决</text><text style="color: #888;" v-else>未解决</text></text>
						<text class="icon">问</text><text class="down">{{it.title}}</text>
					</view>
				</view>
			</block>
			<view class="close" @click="close"></view>
		</view>
		<block v-else>
			<!-- 问答 -->
			<view class="question" v-if="hasRes">
				<block v-for="(it, k2) in lists" :key="k2">
					<view class="question-i" @click="goDetail(it.id)">
						<view class="col-2 lt">
							<image :src="it.img" mode="widthFix" lazy-load="true" @error="imgError(k2)" v-if="it.img"></image>
							<image src="../../static/avatars_default.png" mode="widthFix" lazy-load="true" v-else></image>
							<text class="clamp clamp-1">{{it.name}}</text>
						</view>
						<view class="col-10 rt">
							<text class="up">问题：<text v-if="it.stat == 1" style="color: #ff9d00;">已解决</text><text style="color: #888;" v-else>未解决</text></text>
							<text class="icon">问</text><text class="down">{{it.title}}</text>
						</view>
					</view>
				</block>
			</view>
			<view class="nocont" v-else>暂无内容</view>
			<view class="nomore" v-if="isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view>
		</block>
		<scope-box :isLogin="isLogin" @isShow="isShow"></scope-box>
	</view>
</template>

<script>
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '问答',
				navH: null,
				userInfo: {},
				isLogin: false,
				navs: [],
				isActive: 0,  // 当前活跃分类index
				tid: '',  // 分类ID
				keys: '',
				searchRes: false,
				searchLists: [],
				hasRes: true,
				isLoad: false,
				page: 1,
				size: 10,
				lists: [],
			}
		},
		onLoad() {
			this.navH = this.$store.state.navHeight;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			if(!this.userInfo.id) {
				this.isLogin = true;
			}
			this.getNavs();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.lists = [];
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getNavs();
			this.getQuestion()
			uni.stopPullDownRefresh();
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: '达医解惑',
				path: 'pages/question/index',
			}
		},
		methods: {
			/**
			 * @des 登录提示框
			 */
			isShow() {
				this.isLogin = false;
			},
			/**
			 * @des 获取分类
			 */
			getNavs() {
				app.request({
					url: 'entry/wxapp/type'
				}, (ret) => {
					let d = ret.data;
					console.log(d);
					this.navs = d.data;
					// 初次加载问答
					this.tid = d.data[this.isActive].id;
					this.getQuestion();
				})
			},
			/**
			 * @des 获取问答
			 */
			getQuestion() {
				app.request({
					url: 'entry/wxapp/QuestionData',
					data: {type_id: this.tid}
				}, (ret) => {
					console.log(ret);
					let d = ret.data, tmpData = this.lists, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.lists = tmpData.concat(d.data);
						this.isLoad = len < this.size ? true : false;
					} else {
						this.hasRes = false;
					}
				})
			},
			/**
			 * @des 获取搜索关键词
			 */
			getKeywords(e) {
				let val = e.detail.value;
				this.keys = val;
			},
			/**
			 * @des 搜索
			 */
			search(e) {
				var keys = this.keys;
				if (keys) {
				  this.getSearch(keys)
				} else {
				  uni.showToast({
					title: '请输入关键字',
				  })
				}
			},
			/**
			 * @des 获取搜索结果
			 */
			getSearch(key) {
				app.request({
					url: 'entry/wxapp/SearchQuestion',
					data: {keywords: key}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					if(d.total > 0) {
						this.searchLists = d.data;
						this.searchRes = true;
					}else {
						this.searchRes = false;
					}
				})
			},
			/**
			 * @des 关闭搜索结果
			 */
			close() {
				this.searchRes = false;
			},
			/**
			 * @des 切换菜单
			 */
			switchMenu(i) {
				this.isActive = i;
				this.tid = this.navs[i].id;
				this.lists = [];
				this.page = 1;
				this.getQuestion();
			},
			/**
			 * @des 打开问答详情
			 */
			goDetail(id) {
				uni.navigateTo({
					url: '../qdetail/index?id=' + id
				})
			},
			/**
			 * @des 处理错误图片
			 */
			imgError(i) {
				let tmpQuestions = this.lists;
				tmpQuestions[i].img = '../../static/avatars_default.png';
				this.lists = tmpQuestions;
			},
			imgError2(i) {
				let tmpSearchQuestions = this.searchLists;
				tmpSearchQuestions[i].img = '../../static/avatars_default.png';
				this.searchLists = tmpSearchQuestions;
			}
		}
	}
</script>

<style>
	/* 水平滚动菜单 */
	.scroll-view-x {width: 100%; height: 88upx; background-color: #fff; white-space: nowrap;}
	.scroll-view-item-h { display: inline-block; margin: 0 25upx; color: #999; line-height: 88upx;}
	.scroll-view-item-h.active {position: relative; color: #82d7d0;}
	.scroll-view-item-h.active::after {content: ''; position: absolute; width: 60upx; height: 6upx; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #82d7d0;}
	::-webkit-scrollbar {width: 0; height: 0; color: transparent;}
	/* search */
	.search {position: relative; width: 100%; margin-bottom: 20upx; padding: 25upx 30upx; background-color: #f9f9f9; vertical-align: middle;}
	.search .lt {flex: 4; padding-right: 20upx; border-radius: 5px; text-align: left; line-height: 1; background-color: #e4e4e6; vertical-align: middle;}
	.search .lt input {height: 70upx; padding: 10upx 20upx; line-height: 1;}
	.search .rt {flex: 1; margin-left: 10upx;border-radius: 5px; text-align: right; line-height: 1; font-size: 30upx; color: #666; background-color: #82d7d0; vertical-align: middle; text-align: center;}
	.search .rt image {width: 32upx;}
	.search .rt text {padding-left: 10upx; line-height: 60upx; color: #fff;}
	
	.question .label {display: block; padding: 20upx; text-align: left;}
	/** 关闭搜索内容 */
	.close {position: relative; width: 52upx; height: 52upx; border-radius: 100%; margin: 100upx auto; background-color: #fff;}
	.close::before, .close::after {content: ''; position: absolute; top: 50%; left: 50%; width: 38upx; height: 2upx; background-color: #999;}
	.close::before {transform: translateX(-50%) rotate(45deg);}
	.close::after {transform: translateX(-50%) rotate(135deg);}
</style>
